<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的修饰符</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.outer{
				width: 200px;
				height: 200px;
				background-color: black;
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			.small_box{
				width: 50px;
				height: 50px;
				background-color: white;
			}
			.test_div{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			.red{
				background-color: red;
			}
			.green{
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <input v-for="val in formData" v-if="val.inputType == 'text'" :type="val.inputType" :placeholder="val.placeholder" v-model="val.value"/> -->
			<!-- <div v-for="val in formData">123</div> -->
			<input type="text" v-model.lazy.trim="name" />
			<input type="text" v-model.lazy.number="weight" />
			
			<div class="outer" @click="showVal(1)">
				<div class="inner" @click.stop="showVal(2)"></div>
			</div>
			<form action="https://www.baidu.com">
				<input type="submit" name="" id="" @click.prevent="">
			</form>
			
			<div class="outer" @click.capture="showVal(1)">
				<div class="inner" @click="showVal(2)">
					<div class="small_box" @click="showVal(3)"></div>
				</div>
			</div>
			
			<div class="outer" @click.self="showVal(1)">
				<div class="inner" @click.self="showVal(2)">
					<div class="small_box" @click.self="showVal(3)"></div>
				</div>
			</div>
			
			<div class="inner" @click.once="showVal(1)"></div>
			
			
			<div class="outer" @click.middle="showVal(1)"></div>
			
			<div class="test_div" :class="testClass"></div>
			
			<!-- <div v-for="val in formData">
				<input v-if="val.inputType == 'text'" :name="val.inputName" v-model="val.value"
					:placeholder="val.placeholder" :type="val.inputType" />
				<textarea v-else-if="val.inputType == 'textarea'" :name="val.inputName" cols="30" rows="10"
					v-model="val.value" :placeholder="val.placeholder"></textarea>
			</div> -->

		</div>
	</body>
</html>
<script>
	// vue的修饰符
	const {
		createApp
	} = Vue;
	const app = createApp({
		// 1.0表单修饰符
		// 1.1:.lazy,懒加载
		// 1.2:.number,讲输入内容自动转换为数字
		// 1.3:.trim去掉首位空格
		// 2.0事件修饰符
		// 2.1：.stop防止事件冒泡
		// 2.2:.prevent阻止默认事件
		// 2.3:.capture启用事件捕获模式,优先捕获事件
		// 2.4：.self，当e.target 为自身对象时触发
		// 2.5:.once:事件只触发一次
		
		data() {
			return {
				// formData: [
				// 	{
				// 		inputType: 'text',
				// 		inputName: 'phoneNum',
				// 		placeholder: '请输入电话号码',
				// 		value: ''
				// 	},
				// 	{
				// 		inputType: 'text',
				// 		inputName: 'nickName',
				// 		placeholder: '请输入昵称',
				// 		value: ''
				// 	},
				// 	{
				// 		inputType: 'textarea',
				// 		inputName: 'introduce',
				// 		placeholder: '请输入自我介绍',
				// 		value: ''
				// 	}
				// ],
				name: '',
				weight:'',
				testClass:{red:true,green:true,blue:true}
			}
		},
		methods:{
			showVal(val){
				console.log(val);
			}
		},
		watch: {
			name() {
				console.log("数据被改变");
			},
			weight(newVal){
				this.weight = newVal
			}
		}
	});
	const vm = app.mount('#app')
</script>